<script>
import { MessagePlugin } from 'tdesign-vue-next';
import axios from 'axios';
const wwwHost = import.meta.env.VITE_APP_DOMAIN_URL

export default {
    name: 'enterAdvicePage',
    data() {
        return {


            title: "",
            message: "",
            form: '',
            schools: [],
            majors: [],
            grades: [],
            workexps: [],

            formData: {
                school: '',
                major: '',
                grade: '',
                workexp: '',
                advice: ''
            },

            //inputSelect 变量
            selectSchool: '', //INPUT 选择器输入的过滤值
            schoolPopupVisible: false,//input select 显示下拉控制;

            selectMajor: '', //INPUT 选择器输入的过滤值
            majorPopupVisible: false,//input select 显示下拉控制;

            selectGrade: '', //INPUT 选择器输入的过滤值
            gradePopupVisible: false,//input select 显示下拉控制;

            selectWorkexp: '', //INPUT 选择器输入的过滤值
            workexpPopupVisible: false,//input select 显示下拉控制;

            FORM_RULES: {
                school: [{ required: true, message: '学校必填' }],
                major: [{ required: true, message: '专业必填' }],
                grade: [{ required: true, message: '年级必填' }],
                workexp: [{ required: true, message: '工作经验必填' }],

                advice: [
                    { required: true, message: '建议必填' },
                    { validator: (val) => val.length >= 5, message: '至少 5 个字，中文长度等于英文长度' },
                    { validator: (val) => val.length < 500, message: '不能超过 500 个字，中文长度等于英文长度' },
                ],
            }
        }
    },

    methods: {
        submitAdvice(validateResult) {
            if (validateResult.validateResult === true) {
                var that = this

                console.log('递交专业建议', this.formData)
                const url = wwwHost + "/addAdvice"

                axios.post(url, this.formData).then(res => {
                    that.message = res.data.msg
                    MessagePlugin.success('提交成功');
                    this.$router.push("/");

                }).catch(err => {
                    //给出错误提示                
                    //alert(err)
                    console.log(err);
                })
            } else {
                console.log('Validate Errors: ', validateResult);
                MessagePlugin.warning(validateResult.firstError);
            }



        },

        getMetaData() {
            let metaDataUrl = wwwHost + "/getMetaData"
            axios.get(metaDataUrl)
                .then(response => {
                    // 处理成功情况
                    console.log(response);
                    this.schools = response.data.records.schools;
                    this.grades = response.data.records.grades;
                    this.majors = response.data.records.majors;
                    this.workexps = response.data.records.workexps;

                })
                .catch(error => {
                    // 处理错误情况
                    console.log(error);
                })
                .finally(function () {
                    // 总是会执行
                });
        },

        //INPUT SELECTOR 向后台传递关键字过滤
        querySchool(key) {
            let querySchoolUrl = wwwHost + "/querySchools"
            if (key !== '' && key !== undefined) {
                querySchoolUrl = querySchoolUrl + "?schoolKey=" + key;
            }
            axios.get(querySchoolUrl)
                .then(response => {
                    // 处理成功情况
                    console.log(response);
                    this.schools = response.data.data;
                })
                .catch(error => {
                    // 处理错误情况
                    console.log(error);
                })
                .finally(function () {
                    // 总是会执行
                });
        },

        //INPUT SELECTOR 向后台传递关键字过滤
        queryMajor(key) {
            let queryUrl = wwwHost + "/queryMajors"
            if (key !== '' && key !== undefined) {
                queryUrl = queryUrl + "?majorKey=" + key;
            }
            axios.get(queryUrl)
                .then(response => {
                    // 处理成功情况
                    console.log(response);
                    this.majors = response.data.data;
                })
                .catch(error => {
                    // 处理错误情况
                    console.log(error);
                })
                .finally(function () {
                    // 总是会执行
                });
        },


        //INPUT SELECTOR 向后台传递关键字过滤
        queryGrade(key) {
            let queryUrl = wwwHost + "/queryGrades"
            if (key !== '' && key !== undefined) {
                queryUrl = queryUrl + "?gradeKey=" + key;
            }
            axios.get(queryUrl)
                .then(response => {
                    // 处理成功情况
                    console.log(response);
                    this.grades = response.data.data;
                })
                .catch(error => {
                    // 处理错误情况
                    console.log(error);
                })
                .finally(function () {
                    // 总是会执行
                });
        },

        //INPUT SELECTOR 向后台传递关键字过滤
        queryWorkexp(key) {
            let queryUrl = wwwHost + "/queryWorkexps"
            if (key !== '' && key !== undefined) {
                queryUrl = queryUrl + "?workexpKey=" + key;
            }
            axios.get(queryUrl)
                .then(response => {
                    // 处理成功情况
                    this.workexps = response.data.data;
                    console.log(response.data.data)
                })
                .catch(error => {
                    // 处理错误情况
                    console.log(error);
                })
                .finally(function () {
                    // 总是会执行
                });
        },



        //学校input select 选择器的方法事件 visibaleChange(v,c), inputChange(v,c),optionClick(o)
        onSchoolPopupVisibleChange(val, context) {
            this.schoolPopupVisible = val;
        },
        onSchoolInputChange(val, context) {
            this.querySchool(val)
        },
        onSchoolOptionClick(item) {
            this.selectSchool = item.tagname;
            this.formData.school = item.tagname;
            this.schoolPopupVisible = false;
        },

        //专业input select 选择器的方法事件 visibaleChange(v,c), inputChange(v,c),optionClick(o)
        onMajorPopupVisibleChange(val, context) {
            this.majorPopupVisible = val;
        },
        onMajorInputChange(val, context) {
            this.queryMajor(val)
        },
        onMajorOptionClick(item) {
            this.selectMajor = item.tagname;
            this.formData.major = item.tagname;
            this.majorPopupVisible = false;
        },



        //年级 input select 选择器的方法事件 visibaleChange(v,c), inputChange(v,c),optionClick(o)
        onGradePopupVisibleChange(val, context) {
            this.gradePopupVisible = val;
        },
        onGradeInputChange(val, context) {
            this.queryGrade(val)
        },
        onGradeOptionClick(item) {
            this.selectGrade = item.tagname;
            this.formData.grade = item.tagname;
            this.gradePopupVisible = false;
        },

        //工作经验 input select 选择器的方法事件 visibaleChange(v,c), inputChange(v,c),optionClick(o)
        onWorkexpPopupVisibleChange(val, context) {
            this.workexpPopupVisible = val;
        },
        onWorkexpInputChange(val, context) {
            this.queryWorkexp(val)
        },
        onWorkexpOptionClick(item) {
            this.selectWorkexp = item.tagname;
            this.formData.workexp = item.tagname;
            this.workexpPopupVisible = false;
        }
    },

    created() {
        // this.getMetaData()
        this.querySchool()
        this.queryMajor()
        this.queryGrade()
        this.queryWorkexp()
    }   
}
</script>

<template>
    <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-md shadow-md">
        <h1 class="text-2xl font-bold mb-4">创建学校专业建议词条</h1>
        <t-form :form="form" :rules="FORM_RULES" :data="formData" :colon="true" @reset="onReset" @submit="submitAdvice">
            <t-form-item label="学校" name="school">
                <!-- <t-input v-model="formData.school" placeholder="输入学校" @enter="onEnter"></t-input> -->

                <t-select-input :value="selectSchool" :popup-visible="schoolPopupVisible" v-model="formData.school"
                    :popup-props="{ overlayInnerStyle: { padding: '6px' } }" style="width: 300px" placeholder="选择学校"
                    clearable allow-input @popup-visible-change="onSchoolPopupVisibleChange" @clear="onClear"
                    @input-change="onSchoolInputChange">
                    <template #panel>
                        <ul class="tdesign-demo__select-input-ul-single">
                            <li v-for="item in schools" :key="item.id" @click="() => onSchoolOptionClick(item)">
                                {{ item.tagname }}
                            </li>
                        </ul>
                    </template>
                    <template #suffixIcon>
                        <chevron-down-icon />
                    </template>
                </t-select-input>
            </t-form-item>

            <t-form-item label="专业" name="major">
                <!-- <t-input v-model="formData.major" placeholder="输入专业" @enter="onEnter"></t-input> -->
                <t-select-input :value="selectMajor" :popup-visible="majorPopupVisible" v-model="formData.major"
                    :popup-props="{ overlayInnerStyle: { padding: '6px' } }" style="width: 300px" placeholder="选择学校"
                    clearable allow-input @popup-visible-change="onMajorPopupVisibleChange" @clear="onClear"
                    @input-change="onMajorInputChange">
                    <template #panel>
                        <ul class="tdesign-demo__select-input-ul-single">
                            <li v-for="item in majors" :key="item.id" @click="() => onMajorOptionClick(item)">
                                {{ item.tagname }}
                            </li>
                        </ul>
                    </template>
                    <template #suffixIcon>
                        <chevron-down-icon />
                    </template>
                </t-select-input>
            </t-form-item>

            <t-form-item label="最高学历" name="grade">
                <!-- <t-input v-model="formData.grade" placeholder="输入年级" @enter="onEnter"></t-input> -->
            
                <t-select-input :value="selectGrade" :popup-visible="gradePopupVisible" v-model="formData.grade"
                    :popup-props="{ overlayInnerStyle: { padding: '6px' } }" style="width: 300px" placeholder="选择年级"
                    clearable allow-input @popup-visible-change="onGradePopupVisibleChange" @clear="onClear"
                    @input-change="onGradeInputChange">
                    <template #panel>
                        <ul class="tdesign-demo__select-input-ul-single">
                            <li v-for="item in grades" :key="item.id" @click="() => onGradeOptionClick(item)">
                                {{ item.tagname }}
                            </li>
                        </ul>
                    </template>
                    <template #suffixIcon>
                        <chevron-down-icon />
                    </template>
                </t-select-input>
            </t-form-item>

            <t-form-item label="工作经验" name="workexp">
                <t-select-input :value="selectWorkexp" :popup-visible="workexpPopupVisible" v-model="formData.workexp"
                    :popup-props="{ overlayInnerStyle: { padding: '6px' } }" style="width: 300px" placeholder="选择工作经验"
                    clearable allow-input @popup-visible-change="onWorkexpPopupVisibleChange" @clear="onClear"
                    @input-change="onWorkexpInputChange">
                    <template #panel>
                        <ul class="tdesign-demo__select-input-ul-single">
                            <li v-for="item in workexps" :key="item.id" @click="() => onWorkexpOptionClick(item)">
                                {{ item.tagname }}
                            </li>
                        </ul>
                    </template>
                    <template #suffixIcon>
                        <chevron-down-icon />
                    </template>
                </t-select-input>
            </t-form-item>

            <t-form-item label="专业建议" name="advice">
                <t-textarea v-model="formData.advice" placeholder="请填写你的建议" @enter="onEnter"></t-textarea>
            </t-form-item>
            
            <t-form-item>
                <t-space size="small">
                    <t-button theme="primary" type="submit">提交</t-button>
                    <t-button theme="default" variant="base" type="reset">重置</t-button>
                </t-space>
            </t-form-item>

            <!-- </form> -->
        </t-form>
    </div>

</template>


<style scoped></style>